<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>员工信息管理</title>

    <!-- 引入Vue -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <h1 @click="goHome()">员工信息管理</h1>
        </div>
        <span>员工编号:</span>
        <el-input v-model="queryCondition.queryCode" placeholder="员工编号" style="width:110px;" clearable></el-input>
        <span>姓名:</span>
<!--        <el-input v-model="queryCondition.queryName" placeholder="姓名" style="width:110px;" clearable></el-input>-->
        <el-autocomplete
                class="inline-input"
                v-model="queryCondition.queryName"
                :fetch-suggestions="querySearchName"
                placeholder="姓名"
                :trigger-on-focus="false"
                clearable
        ></el-autocomplete>
        <span>部门:</span>
        <el-cascader :show-all-levels="false" v-model="queryCondition.queryDepIdArrays" placeholder="请选择部门" :options="options" :props="optionPropsSelect" clearable filterable></el-cascader>
        <span>电话:</span>
        <el-input v-model="queryCondition.queryTelephone" placeholder="电话" style="width:150px;" clearable></el-input>
        <span>地址:</span>
<!--        <el-input class="inline-input" v-model="queryCondition.queryAddress" placeholder="地址" style="width:220px;" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable></el-input>-->
<!--        <el-input v-model="queryCondition.queryAddress" placeholder="地址" style="width:220px;"clearable></el-input>-->
        <el-autocomplete
                class="inline-input"
                v-model="queryCondition.queryAddress"
                :fetch-suggestions="querySearchAddress"
                placeholder="地址"
                :trigger-on-focus="false"
                clearable
        ></el-autocomplete>

        <el-button @click="findPage(1)" type="primary" icon="el-icon-search">查询</el-button>
        <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
        <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
            <el-table-column type="index" align="center" label="序号"></el-table-column>
            <el-table-column prop="code" label="编号" align="center"></el-table-column>
            <el-table-column prop="name" label="姓名" align="center"></el-table-column>
            <el-table-column prop="depName" label="部门" align="center"></el-table-column>
            <el-table-column prop="telephone" label="电话" align="center"></el-table-column>
            <el-table-column prop="address" label="住址" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="float:right">
            <el-pagination
                    class="pagiantion"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-size="pagination.pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <!-- 新增标签弹层 -->
        <div>
            <el-dialog title="新增员工信息" :visible.sync="dialogFormVisible">
                <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="员工编号" prop="code">
                                <el-input v-model="formData.code"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="员工姓名" prop="name">
                                <el-input v-model="formData.name"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="电话号码" prop="telephone">
                                <el-input v-model="formData.telephone"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="地址" prop="address">
                                <el-input v-model="formData.address"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="员工部门" prop="depId">
                                <el-cascader :show-all-levels="false" v-model="formData.depId" placeholder="请选择" :options="options" :props="optionProps" clearable filterable></el-cascader>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleAdd()">确定</el-button>
                </div>
            </el-dialog>
        </div>

        <!-- 编辑标签弹层 -->
        <div>
            <el-dialog title="编辑员工信息" :visible.sync="dialogFormVisible4Edit">
                <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="员工编号" prop="code">
                                <el-input v-model="formData.code"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="员工姓名" prop="name">
                                <el-input v-model="formData.name"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="电话号码" prop="telephone">
                                <el-input v-model="formData.telephone"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="地址" prop="address">
                                <el-input v-model="formData.address"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="员工部门" prop="depId">
                                <el-cascader :show-all-levels="false" v-model="formData.depId" placeholder="请选择" :options="options" :props="optionProps" clearable filterable></el-cascader>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                    <el-button type="primary" @click="handleEdit()">确定</el-button>
                </div>
            </el-dialog>
        </div>

    </div>
</body>

<!--引入ajax组件-->
<script src="/static/js/axios-0.18.0.js"></script>

<script>
    //保存编辑窗口数据回显的员工编号
    var code = "";
    //员工编号的校验
    var checkCode = (rule,value,callback)=>{
        if(!value){
            return callback(new Error('员工编号不能为空'));
        }
        if(value == code){
            callback();
        }else{
            axios.get("/employee/findByCode?code="+value).then((res)=>{
                if(res.data.flag){
                    return callback(new Error(res.data.message));
                }else{
                    callback();
                }
            });
        }
    };
    //员工部门的校验
    var checkDepId = (rule,value,callback)=>{
        if(!value){
            return callback(new Error('员工部门不能为空'));
        }else{
            callback();
        }
    };

    //电话号码的验证
    /*var checkTelephone = function(telephone) {
        var reg=/^[1][3,4,5,7,8][0-9]{9}$/;
        if (!reg.test(telephone)) {
            return false;
        } else {
            return true;
        }
    };*/
    //电话号码长度的验证 长度要为11位
    var telephoneNumCheck = function(telephone) {
        var reg=/^[1][0-9]{10}$/;
        if (!reg.test(telephone)) {
            return false;
        } else {
            return true;
        }
    };
    //电话号码的校验
    var checkTelephone = (relu,value,callback)=>{
        if(!value){
            return callback(new Error('电话号码不能为空'));
        }else if(!telephoneNumCheck(value)){
            return callback(new Error('请输入11位手机号码'));
        }else{
            callback();
        }
    };
    var vue = new Vue({
        el: '#app',
        data:{
            optionProps: {//新增和编辑弹窗级联选择器组件属性配对
                checkStrictly: true,
                value: "id",
                label: "name",
                children: "childrenDepartmentList"
            },
            optionPropsSelect: {//查询级联选择器组件属性配对
                multiple: true,
                checkStrictly: true,
                value: "id",
                label: "name",
                children: "childrenDepartmentList"
            },
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:10,//每页显示的记录数
                total:0,//总记录数
            },
            queryCondition: {//查询条件
                queryCode:"",//查询的编码
                queryName:"",//查询的姓名
                queryDepIdArrays:[],//查询的部门层级id数组
                queryTelephone:"",//查询的电话
                queryAddress:""//查询的地址
            },
            dataList: [],//当前页要展示的分页列表数据
            formData: {},//表单数据
            dialogFormVisible: false,//增加表单是否可见
            dialogFormVisible4Edit:false,//编辑表单是否可见
            rules: {//校验规则
                code: [{ validator:checkCode, trigger: 'change' }],
                name: [{ required: true, message: '员工姓名不能为空', trigger: 'change' }],
                telephone: [{ validator:checkTelephone, trigger: 'change' }],
                address: [{ required: true, message: '地址不能为空', trigger: 'change' }],
                depId: [{ validator:checkDepId, trigger: 'change' }]
            },
            options: [],//部门层级组件数据
            nameList:[],//搜索姓名建议列表
            addressList:[]//搜索地址建议列表
            // loadAll:[]
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            axios.get("/department/findAll").then((res)=>{
                this.options = res.data;
            });
            this.findAddressList();
            this.findNameList();
            this.findPage();
        },
        methods: {
            //姓名搜索输入框提示
            findNameList(){
                axios.get("/employee/findNameList").then((res)=>{
                    this.nameList = res.data;
                    console.log(this.nameList)
                });
            },
            querySearchName(queryString, cb) {
                var nameList = this.nameList;
                var results = queryString ? nameList.filter(this.createFilter(queryString)) : nameList;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (nameList) => {
                    return (nameList.value.toLowerCase().indexOf(nameList.toLowerCase()) !== -1);
                };
            },
            //地址搜索输入框提示
            findAddressList(){
                axios.get("/employee/findAddressList").then((res)=>{
                    this.addressList = res.data;
                    console.log(this.addressList)
                });
            },
            querySearchAddress(queryString, cb) {
                var addressList = this.addressList;
                var results = queryString ? addressList.filter(this.createFilter(queryString)) : addressList;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (addressList) => {
                    return (addressList.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
                };
            },
            //回到首页
            goHome(){
                // this.pagination.queryString = "";
                this.queryCondition = {};
                this.findPage(1);
            },
            //编辑
            handleEdit() {
                //表单校验
                this.$refs['dataEditForm'].validate((valid)=>{
                    if(valid){
                        //表单校验通过，发送请求
                        axios.put("/employee/update",this.formData).then((res)=>{
                            if(res.data.flag){
                            //编辑成功，弹出成功提示信息
                            this.$message({
                                type:'success',
                                message:res.data.message
                            });
                            //隐藏编辑窗口
                            this.dialogFormVisible4Edit = false;
                        }else{
                            //编辑失败，弹出错误提示信息
                            this.$message.error(res.data.message);
                        }
                    }).finally(()=>{
                            //重新发送请求查询分页数据
                            // this.findPage();
                            this.goHome();
                            this.findAddressList();
                            this.findNameList();
                            code = "";//将编码重新设为空
                    });
                    }
                });
            },
            //添加
            handleAdd () {
                //检验表单输入项是否合法
                this.$refs['dataAddForm'].validate((valid)=>{
                    if (valid){
                        console.log(this.formData)
                        //表单数据校验通过，发送ajax请求将表单数据提交到后台
                        axios.post("/employee/add",this.formData).then((res)=>{
                            //判断后台返回的flag值，true表示添加操作成功，false为添加操作失败
                            if(res.data.flag){
                            this.$message({
                                type:"success",
                                message:res.data.message
                            });
                            //隐藏新增窗口
                            this.dialogFormVisible = false;
                        }else{
                            this.$message.error(res.data.message);
                        }
                    }).finally(()=>{
                            // this.findPage();
                            this.goHome();
                            this.findAddressList();
                            this.findNameList();
                    });
                    }
                });
            },
            //分页查询
            findPage(page) {
                if(page != undefined){
                    this.pagination.currentPage = page;
                }
                //分页参数
                var param = {
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    //查询条件
                    queryCondition: {
                        queryCode: this.queryCondition.queryCode,
                        queryName: this.queryCondition.queryName,
                        queryDepIdArrays: this.queryCondition.queryDepIdArrays,
                        queryTelephone: this.queryCondition.queryTelephone,
                        queryAddress: this.queryCondition.queryAddress
                    }
                };
                console.log(this.queryCondition.queryDepIdArrays)
                //请求后台
                axios.post("/employee/findPage",param).then((res)=>{
                    // console.log(res);
                    //为模型数据赋值，基于VUE的双向绑定展示到页面
                    this.pagination.total = res.data.total;
                    this.dataList = res.data.rows;
            });
            },
            // 重置表单
            resetForm() {
                this.formData = {};
            },
            // 弹出添加窗口
            handleCreate() {
                this.dialogFormVisible = true;
                this.resetForm();
            },
            // 弹出编辑窗口
            handleUpdate(row) {
                console.log(row.id)
                //发送请求获取员工信息
                axios.get("/employee/findById?id="+row.id).then((res)=>{
                    if(res.data.flag){
                        //显示编辑窗口
                        this.dialogFormVisible4Edit = true;
                        //基于vue双向绑定回显数据到页面
                        this.formData = res.data.data;
                        code = res.data.data.code;//将初始的员工编号记录下来,以便在校验时进行比较
                    }else{
                    this.$message.error(res.data.message);
                }
            });
            },
            //切换页码
            handleCurrentChange(currentPage) {
                //currentPage为切换后的页码
                this.pagination.currentPage = currentPage;
                this.findPage();
            },
            // 删除
            handleDelete(row) {
                this.$confirm('此操作将删除该数据,是否继续?','提示',{
                    type:'warning'
                }).then(()=>{
                    //点击确定按钮执行此代码
                    axios.delete("/employee/deleteById?id="+row.id).then((res)=>{
                    if(res.data.flag){
                    //删除成功
                    this.$message({
                        type:'success',
                        message:res.data.message
                    });
                }else{
                    //删除失败
                    this.$message.error(res.data.message);
                }
            }).finally(()=>{
                    //调用分页,获取最新分页数据
                    // this.findPage();
                    this.goHome();
            });
            }).catch(()=>{
                    //点击取消按钮执行此代码
                    this.$message({
                    type:'info',
                    message:'已取消删除'
                });
            });
            }
        }
    })
</script>
</html>